<!DOCTYPE html>
<HTML>
<head>
    <title></title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" th:href="@{/jquery-weui/lib/weui.css}">
    <link rel="stylesheet" th:href="@{/jquery-weui/css/jquery-weui.css}">
    <style>
        body,html{
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        body {
            background-repeat: no-repeat;
            background: url('') no-repeat center center fixed;
            background-size: cover;
        }
        .container {
            display: flex; /* 使用Flexbox布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            height: 160vh; /* 容器高度设置为视口高度 */
        }
        .content {
            width: 100%; /* 内容宽度 */
            display: flex; /* 使用Flexbox布局 */
            justify-content: center; /* 水平居中 */
            align-items: baseline; /* 垂直居中 */
            height: 100px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="content">
        <audio id="background-music" controls="controls">
            <source id="audioSource" type="audio/mpeg">
            您的浏览器不支持在线播放音频！
        </audio>
    </div>
</div>

<script type="text/javascript" th:src="@{/jquery-weui/lib/jquery-2.1.4.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/jquery-weui/lib/fastclick.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/jquery-weui/js/jquery-weui.js}" charset="utf-8"></script>
<script>
    // 后端地址
    var url = "[[${serverUrl}]]/stamp/h5/api/";
    // 音频和背景图片地址前缀
    var url_sp = "[[${serverUrl}]]/stamp/tp/";
    var sp = "[[${sp}]]"; // 音频标识，从后端获取

    console.info("要播放的音频：" + sp);

    function init_data(){
        // 获取音频元素和源元素
        const audio = document.getElementById('background-music');
        const audioSource = document.getElementById('audioSource');

        // 根据返回结果更新背景图片和音频地址
        if (sp) {
            // 更新背景图片
            document.body.style.backgroundImage = `url('${url_sp}spfm?id=${sp}')`;

            // 更新音频源
            if (audioSource) {
                audioSource.src = `${url_sp}spvideo?id=${sp}`;
                audio.load(); // 重新加载音频
            }

            // 获取并设置页面标题
            fetch(url_sp + "getbt?id=" + sp)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('请求失败');
                    }
                    return response.text();
                })
                .then(data => {
                    document.title = data;
                })
                .catch(error => {
                    console.error('获取标题时出错：', error);
                });
        }
    }

    // 页面加载完成后初始化数据
    document.addEventListener('DOMContentLoaded', function() {
        init_data();

        // 自动播放处理
        const audio = document.getElementById('background-music');
        const playPromise = audio.play();
        if (playPromise !== undefined) {
            playPromise
                .then(() => {
                    console.log('音频自动播放成功');
                })
                .catch(error => {
                    console.warn('自动播放被阻止:', error);
                });
        }
    });
</script>
</body>
</html>
